<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级联动示例</title>
    <script src="/js/jquery-1.12.4.js"></script>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市222</option>
    </select>

    <script>
        // 省份数据
        var provinceData = [
            { id: '1', name: '省份1', citys: ['城市1', '城市2'] },
            { id: '2', name: '省份2', citys: ['城市3', '城市4'] },
            { id: '3', name: '省份3', citys: ['城市5', '城市6'] }
        ];

        // 初始化省份下拉框
        function initProvince() {
            var html = '<option value="">请选择省份</option>';
            for (var i = 0; i < provinceData.length; i++) {
                html += '<option value="' + provinceData[i].id + '">' + provinceData[i].name + '</option>';
            }
            $('#province').html(html);
        }

        // 初始化城市下拉框
        function initCity() {
            var html = '<option value="">请选择城市</option>';
            var provinceId = $('#province').val();
            for (var i = 0; i < provinceData.length; i++) {
                if (provinceData[i].id === provinceId) {
                    for (var j = 0; j < provinceData[i].citys.length; j++) {
                        html += '<option value="' + provinceData[i].citys[j] + '">' + provinceData[i].citys[j] + '</option>';
                    }
                    break;
                }
            }
            $('#city').html(html);
        }

        // 初始化省份下拉框
        initProvince();

        // 省份下拉框改变事件
        $('#province').on('change', function() {
            initCity();
        });
    </script>
</body>
</html>